page {
  display: flex;
  flex-direction: column;
  align-items: center;

  .avatar {
    margin-top: 32px;

    width: 78px;
    height: 78px;
    position: relative;
    justify-self: center;
    align-self: center;

    .avatar__img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      overflow: hidden;
      position: relative;

      background-color: #ccc;
    }

    .avatar__edit-button {
      position: absolute;
      bottom: 0;
      right: 0;

      width: 20px;
      height: 20px;
    }
  }

  .info-form {
    margin-top: 48px;
    width: 100vw;

    box-sizing: border-box;

    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .info-item {
      width: calc(100vw - 32px);
      height: 54px;
      border-bottom: 1px solid rgba($color: #ccc, $alpha: 0.4);
      display: grid;
      grid-template:
        'label content arrow' 1fr
        / max-content 1fr min-content;
      align-items: center;

      position: relative;

      &__picker {
        grid-area: content-start / content-start / arrow-end / arrow-end;

        width: 100%;
        height: 100%;

        position: relative;
        .view {
          position: absolute;
          width: 100%;
          height: 100%;
        }
      }

      &__label {
        grid-area: label;
        width: auto;

        display: flex;
        align-items: center;

        font-size: 16px;
        color: #010101;

        margin-right: 65px;
      }

      &__content {
        grid-area: content;
        justify-self: end;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        font-size: 16px;
        color: #333;

        &--empty {
          color: #999;
        }
      }

      &__arrow {
        margin-left: 2px;
        grid-area: arrow;
        justify-self: end;
        align-self: center;

        width: 24px;
        height: 24px;
      }

      &--name {
        .info-item__content {
          color: #ff457a;
          text-align: right;
        }
      }

      &--phone {
        .info-item__content {
          text-align: right;
        }
      }

      &--qrcode {
        .info-item__content {
          color: #999;
        }
      }

      &--introduction {
        .info-item__content {
          max-width: 100%;
          box-sizing: border-box;

          display: block;
          justify-content: start;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          color: #999;
        }
      }

      &--tag {
        .info-item__content {
          display: flex;
          justify-content: flex-end;

          column-gap: 8px;
          .tag {
            height: 18px;
            background: rgba($color: #ff457a, $alpha: 0.2);
            border-radius: 19px;

            padding: 0 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 10px;
            color: #ff457a;
          }
        }
      }

      &--bg {
        .info-item__content {
          color: #999;
        }
      }
    }

    .save-btn {
      margin: 40px auto;
      width: 231px;
      height: 40px;
      background: linear-gradient(99deg, #ff457a, #ff759d 100%);
      border-radius: 20px;
      border: none;

      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 16px;
      color: #fff;
    }
  }
}
